<template lang="">
  <div class="inform">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form :model="params">
          <el-row :gutter="120" style="margin-top: 25px">
            <el-col :span="6">
              <el-form-item label="公告标题：" label-width="130">
                <el-input
                  class="ipt-width"
                  v-model="params.title"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="紧急程度：" label-width="130">
                <el-select
                  v-model="params.colorlevel"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in urgencyLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开始日期：" label-width="130">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="120">
            <el-col :span="6">
              <el-form-item label="结束日期：" label-width="130">
                <el-date-picker
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-button type="primary" @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
             
              <el-button class="add" @click="handlerAdd"
                ><el-icon
                  style="color: #fff; margin-right: 5px; font-size: 20px"
                  ><DocumentAdd /></el-icon
                >新增</el-button
              >
              <el-button
              type="danger"
              style="margin-left: 14px"
              @click="handleDelete"
              ><el-icon style="color: #fff; margin-right: 5px"
                ><Delete /></el-icon
              >删除</el-button
            >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-wrap table-wrap">
      <el-table
        :data="informDataList"
        :show-overflow-tooltip="true"
        border
        class="table-height"
        @selectionChange="tableChange"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column prop="title" align="center" label="公告标题" />
        <el-table-column
          prop="name"
          align="center"
          label="紧急程度"
          width="150"
        >
          <template #default="{ row }">
            <div :style="[{ color: row.colorlevel==1?'#FF0000':row.colorlevel==2?'#FF9000':'#FFCC00' }]">
              {{
                urgencyLevel.find((item) => item.value == row.colorlevel)
                  ?.label || "--"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="groupname " align="center" label="通知对象">
          <template #default="{ row }">
            <div>
              {{
                groupsList.find((item) => item.value == row.groupid)?.label ||
                "--"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="120">
          <template #default="{ row }">
            <div class="publish-status">
              {{ row.status == 1 ? "已发布" : "待发布" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="publishdate" align="center" label="提交日期" />
        <el-table-column label="操作" width="430" align="center">
          <template #default="{ row }">
            <div class="btn-wrap">
              <button
                class="publish"
                @click="handlePublish(row.id, row.status)"
                :style="[{ background: row.status == 1 ? 'red' : '' }]"
              >
                {{ row.status == 1 ? "撤回" : "发布" }}
              </button>
              <!-- 撤销 b #FF3535 -->
              <button class="edit" @click="handleEdit(row.id)">编辑</button>
              <button class="detail" @click="handleDetail(row.id)">详情</button>
              <button
                class="search-enterprise"
                @click="searchEnterpriseList(row.groupid)"
              >
                查看企业
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>
    <Dialog
      headerName="新增"
      diaWidth="84"
      diaTop="2"
      @save="addBtnSave"
      footerBtm="10"
      footerTop="70"
      v-model:showDialog="addMsgFlag"
    >
      <template #content>
        <div class="dia-content">
          <el-form ref="addFormRef" :model="addParams" :rules="addFormRules">
            <el-row :gutter="20" style="margin-top: 25px">
              <el-col :span="8">
                <el-form-item label="公告标题：" prop="title">
                  <el-input
                    class="ipt-width dia"
                    v-model="addParams.title"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="通知对象：" prop="groupid">
                  <el-select
                    v-model="addParams.groupid"
                    clearable
                    class="ipt-width dia"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in groupsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急程度：" prop="colorlevel">
                  <el-select
                    v-model="addParams.colorlevel"
                    clearable
                    placeholder="请选择"
                    class="ipt-width dia"
                  >
                    <el-option
                      v-for="item in urgencyLevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="11">
                <el-form-item label="预警时间：" prop="adddate">
                  <el-date-picker
                    class="ipt-width dia"
                    v-model="addParams.adddate"
                    @change="handleDateChange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    clearable
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="content-wrap">
            <!-- 工具栏 -->
            <Toolbar
              class="default-border"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              class="flex-1 overflow-y-auto"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
              @onChange="onChange"
            />
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件：">
                <Upload :uploadFileUrl="uploadFileUrl" @getFile="pushItem">
                  <template #content>
                    <div
                      style="
                        display: flex;
                        flex-wrap: wrap;
                        height: 110px;
                        overflow: scroll;
                      "
                    >
                      <div
                        @click.stop="xx"
                        class="upload-item"
                        v-for="(item, index) in uploadFileList"
                        :key="item.value"
                      >
                        {{ item.label }}
                        <div @click.stop="delUploadFile(index)" class="error">
                          ×
                        </div>
                      </div>
                      <button class="upload-btn">上传</button>
                    </div>
                  </template>
                </Upload>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
    </Dialog>
    <searchEnterprise
      :sendIds="sendIds"
      v-model:showDialog="searchEnterpriseFlag"
    />
    <Detail
      v-model:showDialog="detailFlag"
      :itemRow="itemRow"
      :groupsList="groupsList"
      :urgencyLevel="urgencyLevel"
    />
    <OperateDialog
      @save="publishBtnSave"
      v-model:showDialog="publishFlag"
      :msg="publishMsg"
    />
    <OperateDialog @save="delBtnSave" v-model:showDialog="delDialog" />
  </div>
</template>
<script setup lang="ts">
import OperateDialog from "@/components/operateDialog.vue";
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import Upload from "@/components/Upload.vue";
import http from "@http";
import ElMessage from "@/components/ElMessage.js";
import Dialog from "@/components/Dialog";
import searchEnterprise from "./searchEnterprise";
import Detail from "./detail";
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor, SlateText } from "@wangeditor/editor";
let uploadFileUrl = import.meta.env.VITE_UPLOAD_file_URL;
let params = reactive({ page: 1, pagesize: 10 });
let handleSearch = () => {};
import { getToken } from "@/stores/modules/home.ts";
let addFormRef = ref(null);
let total = ref(11);
let delDialog = ref(false);
let searchEnterpriseFlag = ref(false);

let addMsgFlag = ref(false);
let addParams = reactive({ adddate: [] });
let itemRow = ref({});
let delIds = ref("");
let publishMsg = ref("确定要发布吗");
let dateRange = ref();
let uploadFileList = ref([]);
let sendData = reactive({});
let uploadFile = ref([]);
let groupsList = ref([]);
let adddate = ref([]);
let publiseStatus = ref("");
let publishId = ref("");
let flagVal = ref({});
let sendIds = ref("");
let urgencyLevel = ref([]);
let publishFlag = ref(false);
let detailFlag = ref(false);
const editorRef = shallowRef(null);
let informDataList = ref([{}]);

type TProps = {
  mode?: string;
  valueHtml?: string;
  placeholder?: string;
  disable?: boolean;
};
onMounted(() => {
  const toolbar = DomEditor.getToolbar();
  console.log(toolbar, "toolbar");
});
let toolbarConfig = {
  excludeKeys: ["uploadImage", "insertVideo", "uploadVideo"],
};
let props = withDefaults(defineProps<TProps>(), {
  mode: "default", // or 'simple'
  valueHtml: "",
  placeholder: "请输入内容...",
  disable: false,
});

let addBtnSave = () => {
  if (!addParams.content || addParams.content == "<p><br></p>") {
    ElMessage({ msg: "发布内容不能为空", type: "warning" });
    return;
  }

  addParams.attachmentname = uploadFileList.value
    .map((item) => {
      return item.label;
    })
    .join(";");
  addParams.attachmenturl = uploadFileList.value
    .map((item) => {
      return item.value;
    })
    .join(";");

  addFormRef.value.validate((valid) => {
    if (valid) {
      let cloneParams = {};

      for (let key in addParams) {
        cloneParams[key] = addParams[key];
      }
      delete cloneParams.adddate;

      http({ url: "/admPCNotice/addOrUpdate", data: cloneParams }).then(
        (res) => {
          if (res.code == 0) {
            addMsgFlag.value = false;
            uploadFile.value = [];
            uploadFileList.value = [];
            getList();
          }
        }
      );
    }
  });
};
let tableChange = (row) => {
  console.log(row);
  delIds.value = row
    .map((item) => {
      return item.id;
    })
    .join(",");
};
let handleDateChange = (e) => {
  console.log(e, "e");

  if (e == null) {
    addParams.monitorstarttime = "";
    addParams.monitorendtime = "";
    return;
  }
  addParams.monitorstarttime = e[0];
  addParams.monitorendtime = e[0];
};
let serachDateChange = (e) => {
  if (e == null) {
    params.monitorstarttime = "";
    params.monitorendtime = "";
    return;
  }
  params.monitorstarttime = e[0];
  params.monitorendtime = e[0];
};
let handleUploadFileChange = (e) => {
  console.log(e, "e");
};
let handleDetail = (id) => {
  detailFlag.value = true;
  http({ url: "/admPCNotice/detail", data: { id } }).then((res) => {
    if (res.code == 0) {
      itemRow.value = res.data;
    }
  });
};
let onChange = (e) => {
  addParams.content = editorRef.value.getHtml(e.children);
};
// let fileterUploadFile = (e)=>{
//   console.log(e,'e');
//   console.log(uploadFile);
// }
const emits = defineEmits();
let handlerAdd = () => {
  addMsgFlag.value = true;
  adddate.value[0] = "";
  adddate.value[1] = "";
  addParams.monitorstarttime = "";
  addParams.monitorendtime = "";
  addParams.content = "";
  uploadFile.value.length = 0;
  uploadFileList.value.length = 0;

  nextTick(() => {
    addFormRef.value.resetFields();
    editorRef.value.setHtml("");
  });
};
let searchEnterpriseList = (id) => {
  searchEnterpriseFlag.value = true;
  sendIds.value = id;
};

let publishBtnSave = () => {
  http({
    url: "/admPCNotice/publishNotice",
    data: { id: publishId.value, status: publiseStatus.value },
  }).then((res) => {
    if (res.code == 0) {
      publishFlag.value = false;
      getList();
    }
  });
};
const valueHtml = computed({
  get() {
    return props.valueHtml;
  },
  set(valueHtml) {
    emits("update:valueHtml", valueHtml);
  },
});
let handleDelete = () => {
  if (delIds.value == "") {
    ElMessage({ msg: "请选择要删除的通知", type: "warning" });
    return;
  }
  delDialog.value = true;
};
let delUploadFile = (index) => {
  uploadFileList.value.splice(index, 1);
  uploadFile.value.splice(index, 1);
};
let delBtnSave = () => {
  http({ url: "/admPCNotice/delete", data: { id: delIds.value } }).then(
    (res) => {
      if (res.code == 0) {
        delIds.value = "";

        delDialog.value = false;
        getList();
      }
    }
  );
};
watch(
  () => props.disable,
  (bool) => {
    if (!editorRef.value) return;
    bool ? editorRef.value.disable() : editorRef.value.enable();
  },
  { deep: true }
);
let handlePublish = (id, flag) => {
  publishFlag.value = true;
  publishId.value = id;
  if (flag == 0 || flag == 2) {
    publiseStatus.value = 1;
    publishMsg.value = "确定要发布吗";
  } else if (flag == 1) {
    publiseStatus.value = 2;
    publishMsg.value = "确定要撤回吗";
  }
};
let pushItem = (e) => {
  console.log(e, "eeeeeeeee");
  flagVal.value = uploadFileList.value.find((item) => {
    return item.label == e.filename;
  });
  if (flagVal.value?.label) {
    ElMessage({ msg: "文件已存在", type: "warning" });
    return;
  }
  uploadFileList.value.push({
    label: e.filename,
    value: e.url,
  });

  uploadFile.value.push(
    uploadFileList.value[uploadFileList.value.length - 1].value
  );
};
let handleEdit = (id) => {
  console.log("ggg-=");
  let row = {};
  addMsgFlag.value = true;

  nextTick(() => {
    http({ url: "/admPCNotice/detail", data: { id } }).then((res) => {
      if (res.code == 0) {
        row = res.data;
        addFormRef.value.resetFields();
        addParams.content = row.content;

        addParams.id = row.id;
        addParams.monitorstarttime = row.monitorstarttime;
        addParams.monitorendtime = row.monitorendtime;

        addParams.adddate[0] = row.monitorstarttime;
        addParams.adddate[1] = row.monitorendtime;

        addParams.groupid = Number(row.groupid);
        addParams.title = row.title;
        addParams.colorlevel = String(row.colorlevel);
        editorRef.value.setHtml(JSON.parse(JSON.stringify(row.content)));
        uploadFileList.value.length = 0;
        if (row.attachmentname && row.attachmenturl) {
          let attachmentname = row.attachmentname.split(";");
          let attachmenturl = row.attachmenturl.split(";");

          for (var i = 0; i < attachmentname.length; i++) {
            // uploadFile.value.push(attachmenturl[i]);
            uploadFileList.value.push({
              label: attachmentname[i],
              value: attachmenturl[i],
            });
          }
        }
      }
    });
  });
};
let addFormRules = {
  title: [
    {
      required: true,
      message: "公告标题不能为空",
      trigger: "blur",
    },
  ],
  groupid: [
    {
      required: true,
      message: "通知对象不能为空",
      trigger: "blur",
    },
  ],
  colorlevel: [
    {
      required: true,
      message: "紧急程度不能为空",
      trigger: "blur",
    },
  ],
  adddate: [
    {
      required: true,
      message: "预警时间不能为空",
      trigger: "blur",
    },
  ],
};
const editorConfig = {
  placeholder: "请输入内容...",

  MENU_CONF: {
    // excludeKeys: ["headerSelect", "italic", "group-more-style"],
    uploadImage: {
      server: import.meta.env.VITE_UPLOAD_URL,
      // 超时时间，默认为 10 秒
      timeout: 30 * 1000, // 5s
      fieldName: "file",
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false, // join params to url
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: { dataKey: 0, bizType: "common" },
      // 自定义增加 http  header
      headers: {
        token: getToken(),
      },
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      maxFileSize: 10 * 1024 * 1024, // 10M
      base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["image/*"],
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 30,
      onBeforeUpload(file) {
        console.log("onBeforeUpload", file);

        return file; // will upload this file
        // return false // prevent upload
      },
      onProgress(progress) {
        console.log("onProgress", progress);
      },
      onSuccess(file, res) {
        console.log("onSuccess11", file, res);
      },
      onFailed(file, res) {
        alert(res.message);
        console.log("onFailed22", file, res);
      },
      onError(file, err, res) {
        alert(err.message);
        console.error("onError", file, err, res);
      },
    },
  },
};

http({ url: "/admPCNoticeGroup/listItemGroups" }).then((res) => {
  if (res.code == 0) {
    groupsList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
let getList = () => {
  http({ url: "/admPCNotice/datalist", data: params }).then((res) => {
    if (res.code == 0) {
      informDataList.value = res.data.list;
      total.value = res.data.total;
      ElMessage({ msg: "查询成功" });
    }
  });
};
getList();
let options = [{}];
// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor;
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

let tableData = ref([]);
http({ url: "/listitem/getmodule", data: { module: "B08" } }).then((res) => {
  if (res.code == 0) {
    urgencyLevel.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
.inform {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;

  .title-wrap {
    height: 182px;
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      padding-left: 35px;
      padding-right: 43px;
      :deep(.el-button.add) {
        background-color: #009944 !important;
        box-shadow: none;
        color: #fff;
        width: 89px;
        height: 37px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
      }
    }
  }
  :deep(.el-date-editor) {
    /* width: 430px !important; */
  }
  :deep(.el-date) {
    width: 100%;
  }
  .pagination-wrap {
    padding-right: 60px;
    padding-top: 20px;
    :deep(.el-input.el-input--suffix) {
      width: 120px !important;
    }
    :deep(.el-input.el-input--default.el-pagination__editor.is-in-pagination) {
      width: 50px !important;
    }
  }
  .data-wrap {
    height: calc(100vh - 80px - 142px);
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 8px 0 8px;
    .table-height {
      height: 60vh !important;
      overflow-y: scroll;
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .publish {
          width: 89px;
          height: 37px;
          background: #0874fa;
          border-radius: 4px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 19px;
          color: #ffffff;
        }
        .edit {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
          color: #ec8000;
          width: 89px;
          height: 37px;
          background: #ffefcc;
          border-radius: 4px;
        }
        .detail {
          background-color: #cee3fe;

          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
          color: #0874fa;

          width: 89px;
          height: 37px;

          border-radius: 4px;
        }
        .search-enterprise {
          background-color: #e0f2e6;

          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
          color: #30a858;
          width: 114px;
          height: 37px;

          border-radius: 4px;
        }
      }
      .publish-status {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  :deep(.el-input-group__append) {
    background-color: #999999;
    button {
      color: #fff;
      font-weight: 400;
      font-size: 20px;
    }
  }
  :deep(.el-input.el-input--suffix) {
    width: 130px;
  }
  .ipt-width.d {
    width: 300px !important;
  }

  :deep(.el-input.el-input--suffix) {
    width: 250px !important;
  }
  .upload-btn {
    margin-left: 10px;
    flex-shrink: 0;
    margin-top: 10px;
  }
  .upload-item:first-child {
    margin-left: 0px !important;
    margin-top: 10px !important;
  }
  .upload-item:hover {
    color: #409eff;
  }
  .upload-item {
    font-size: 20px;
    margin-left: 10px;
    height: 40px;
    line-height: 40px;
    padding-right: 40px;
    background-color: #ccc;
    color: #606266;
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    border-radius: 4px;
    padding-left: 10px;
    position: relative;
    margin-top: 10px;
    .error {
      position: absolute;
      right: 10px;
      top: 50%;

      transform: translateY(-50%);
      font-size: 25px;
      /* background-color: #ccc;
      height: 23px;
      line-height: 22px;
      width: 23px;
      text-align: center;
      border-radius: 50%; */
    }
    .error:hover {
      /* background-color: red; */
      color: red;
    }
  }
  .dia-content {
    padding-left: 45px;
    padding-right: 45px;
    .content-wrap {
      margin-top: 8px;
    }
    :deep(.w-e-scroll) {
      height: 40vh !important;
    }
    .ipt-width.dia {
      width: 340px !important;
    }
    :deep(.w-e-bar.w-e-bar-show.w-e-toolbar) {
      background-color: #f0f0ee;
    }
    :deep(.w-e-text-container) {
      margin-bottom: 40px;
    }
    :deep(.w-e-scroll) {
      background: #ffffff;
      border: 1px solid #cccccc;
    }

    :deep(.el-input__wrapper) {
      width: 351px !important;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;

      border: 1px solid #cccccc;
      margin-bottom: 20px;
    }
    :deep(.el-dialog.el-input__wrapper, .el-dialog .el-textarea__inner) {
      background-color: none;
    }
    :deep(.el-input.el-input--suffix) {
      width: 250px !important;
    }
    :deep(.el-input::placeholder) {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 20px;
      color: #999999;
    }
    :deep(.el-input.el-input--suffix) {
      width: 320px !important;
      height: 40px;
    }
    :deep(.el-input__inner::placeholder) {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 20px !important;
      color: #999999;
    }
    :deep(.el-row) {
      height: 60px;
    }
    :deep(.el-input-group__append) {
      width: 71px;
      height: 40px;
      background: #999999;

      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #ffffff;
    }
    .upload-width {
      width: 280px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #cccccc;
      display: flex;
      justify-content: flex-end;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      margin-top: 8px;
    }
    .upload {
      margin-left: -10px;
    }
    button {
      background: #999999;
      border-radius: 4px;
      border: 1px solid #cccccc;
      width: 71px;
      height: 42px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #ffffff;
    }
  }
  :deep(.el-range-input) {
    font-size: 20px !important;
    font-weight: 400;
    color: #000;
  }
  :deep(.el-range-separator) {
    font-size: 20px !important;
    font-weight: 400;
    color: #000;
  }
  :deep(.el-input__icon.el-range__icon) {
    font-size: 20px;
  }
  :deep(.el-input__wrapper) {
    margin-bottom: 0px !important;
  }
  :deep(.el-upload.el-upload--text) {
    overflow: visible;
  }
  :deep(.el-select__tags-text) {
    font-size: 14px;
    color: #000;
  }
  :deep(.el-tag.is-closable.el-tag--info.el-tag--default.el-tag--light) {
    height: 30px;
  }
  :deep(.el-input__inner) {
    font-size: 20px !important;
  }
}
</style>
